<<template>
  <div class="slide-show" @mouseover="clearInv" @mouseout="runInv">
      <div class="slide-img">
          <a :href="slides[nowIndex].href">
            <!-- <img :src="slides[nowIndex].src" />     -->
            <transition name="slide-trans">
                <img v-if="isShow" :src="slides[nowIndex].src" />
            </transition>
            <transition name="slide-trans-old">
                <img v-if="!isShow" :src="slides[nowIndex].src" />
            </transition>
          </a>
      </div>
        <h2>{{slides[nowIndex].title}}</h2>
        <ul class="slide-pages">
            <button @click="goto(prevIndex)">&lt;</button>
            <li v-for="(item,index) in slides" @click="goto(index)">
                <a :class="{on: index === nowIndex}">{{index + 1}}</a>
            </li>
             <button @click="goto(nextIndex)">&gt;</button>
         </ul>
  </div>
</template>
<script>
export default {
  props:{
    slides:{
        type: Array,
        default:[]
    },
    inv:{       //幻灯片切换的速度
        type:Number,
        default:1000
    }
  },
  computed:{
      prevIndex(){
        if(this.nowIndex === 0){
            console.log(this.slides.length-1)
            return this.slides.length-1
        }
        else
        {
            console.log(this.nowIndex - 1)
            return this.nowIndex - 1;
        }
      },
      nextIndex(){
        if(this.nowIndex === (this.slides.length-1)){
            return 0
        }
        else
        {
            return this.nowIndex + 1;
        }
      }
  },
  methods:{
      goto(index){
        this.isShow=false
        setTimeout(()=>{
          this.isShow = true
          this.nowIndex = index
          this.$emit('onChange',index)
        },500)
      },
      runInv(){
          this.invId = setInterval(()=>{
              this.goto(this.nextIndex)
              //console.log(123);
          },this.inv)
      },
      clearInv(){
          clearInterval(this.invId)
      }
  },
  data(){
    return{
        nowIndex:0,
        isShow:true
    }
  },
  mounted(){
      //console.log(this.slides)
      this.runInv()
  }
}
</script>
<style scoped>
.slide-trans-enter-active {
  transition: all 1s;
}
.slide-trans-enter {
  transform: translateX(900px);
}
.slide-trans-old-leave-active {
  transition: all 1s;
  transform: translateX(-900px);
}
.slide-show {
  position: relative;
  margin: 15px 15px 15px 0;
  width: 900px;
  height: 500px;
  overflow: hidden;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.slide-show h2 {
  position: absolute;
  width: 100%;
  height: 100%;
  color: #fff;
  background: #000;
  opacity: .5;
  bottom: 0;
  height: 30px;
  text-align: left;
  padding-left: 15px;
  padding-top:15px;
}
.slide-img {
  width: 100%;
}
.slide-img img {
  width: 100%;
  position: absolute;
  top: 0;
}
.slide-pages {
  position: absolute;
  bottom: 0px;
  right: 15px;
  font-size: 15px
}
.slide-pages li {
  display: inline-block;
  padding: 0 15px;
  cursor: pointer;
  color: #fff;
}
.slide-pages button {
  display: inline-block;
  padding: 15px;
  cursor: pointer;
  color: #fff;
  background: transparent; /*完全透明*/
  border:0px;
}
.slide-pages li .on {
  color:#1E90FF
}
</style>